// 关于我们页面
import Navbar from '../components/Navbar.js';
import Footer from '../components/Footer.js';
import { navigateTo } from '../router/index.js';

function About() {
  const aboutPage = document.createElement('div');
  aboutPage.className = 'min-h-screen flex flex-col';
  
  // 创建导航栏
  const navbar = Navbar();
  aboutPage.appendChild(navbar);
  
  // 页面内容
  const contentContainer = document.createElement('div');
  contentContainer.className = 'flex-grow';
  contentContainer.innerHTML = `
    
    <!-- 页面标题区 -->
    <section class="bg-gradient-to-br from-blue-50 to-indigo-50 section-padding">
      <div class="container mx-auto px-4 md:px-8 text-center">
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-4">关于我们</h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          MSRM3 - 专业的网络管理与安全解决方案提供商
        </p>
      </div>
    </section>
    
    <!-- 品牌故事 -->
    <section class="section-padding bg-white">
      <div class="container mx-auto px-4 md:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
          <div>
            <h2 class="text-3xl font-bold text-dark mb-6">品牌故事</h2>
            <p class="text-gray-600 mb-6 leading-relaxed">
              MSRM3（Multi-Service Resource Manager 3）源于2018年创立的一个小型开源项目，当时我们的团队发现，市场上缺乏一款真正适合中小网络环境、操作简便且功能强大的网络管理工具。
            </p>
            <p class="text-gray-600 mb-6 leading-relaxed">
              凭借着对网络技术的热爱和对用户体验的执着追求，我们开始着手开发一款全新的网络管理系统。经过多年的持续迭代和优化，MSRM3已从最初的简单网络拓扑管理工具，发展成为集拓扑管理、数据监控、网络工具、安全防护、监控告警和系统设置于一体的综合性网络管理平台。
            </p>
            <p class="text-gray-600 leading-relaxed">
              如今，MSRM3已服务于全球超过10万家企业和组织，帮助他们实现了更高效、更安全的网络管理。我们的愿景是成为全球领先的网络管理与安全解决方案提供商，为每一个网络管理员提供最贴心的服务。
            </p>
          </div>
          <div class="relative">
            <div class="absolute -top-6 -left-6 w-24 h-24 bg-primary/10 rounded-full"></div>
            <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-secondary/10 rounded-full"></div>
            <div class="relative z-10 bg-white shadow-xl rounded-xl p-6 border border-gray-100">
              <div class="aspect-video bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg flex items-center justify-center">
                <div class="text-center">
                  <i class="fa fa-globe text-6xl text-primary mb-4"></i>
                  <p class="text-lg font-medium text-gray-700">2018 - 2024</p>
                  <p class="text-sm text-gray-500">从开源项目到行业标杆</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 核心理念 -->
    <section class="section-padding bg-gray-50">
      <div class="container mx-auto px-4 md:px-8">
        <h2 class="text-3xl font-bold text-dark text-center mb-12">核心理念</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- 理念1 -->
          <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100 hover:shadow-xl transition-shadow duration-300">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
              <i class="fa fa-lightbulb-o text-2xl text-primary"></i>
            </div>
            <h3 class="text-xl font-bold mb-4">简单易用</h3>
            <p class="text-gray-600">
              我们坚信，优秀的网络管理工具不应该是复杂难懂的。MSRM3致力于提供直观简洁的用户界面和操作流程，让每一位网络管理员都能轻松上手，高效工作。
            </p>
          </div>
          <!-- 理念2 -->
          <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100 hover:shadow-xl transition-shadow duration-300">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
              <i class="fa fa-shield text-2xl text-primary"></i>
            </div>
            <h3 class="text-xl font-bold mb-4">安全可靠</h3>
            <p class="text-gray-600">
              网络安全是我们永恒的追求。MSRM3采用先进的安全技术和加密算法，确保您的网络数据安全。我们的产品经过严格的安全测试，为您的网络环境保驾护航。
            </p>
          </div>
          <!-- 理念3 -->
          <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100 hover:shadow-xl transition-shadow duration-300">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
              <i class="fa fa-rocket text-2xl text-primary"></i>
            </div>
            <h3 class="text-xl font-bold mb-4">创新突破</h3>
            <p class="text-gray-600">
              技术创新是我们发展的动力源泉。MSRM3团队持续关注行业动态和技术趋势，不断推出创新功能和解决方案，帮助用户应对日益复杂的网络挑战。
            </p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 团队介绍 -->
    <section class="section-padding bg-white">
      <div class="container mx-auto px-4 md:px-8">
        <h2 class="text-3xl font-bold text-dark text-center mb-4">核心团队</h2>
        <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">
          我们拥有一支充满激情和创造力的专业团队，成员来自网络安全、软件开发、用户体验等多个领域，致力于打造卓越的网络管理产品。
        </p>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          <!-- 团队成员1 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow duration-300">
            <div class="aspect-square bg-gray-200 flex items-center justify-center">
              <i class="fa fa-user text-5xl text-gray-400"></i>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-bold mb-1">李明</h3>
              <p class="text-primary font-medium mb-3">创始人 & CEO</p>
              <p class="text-gray-600 text-sm mb-4">
                前大型科技公司网络架构师，拥有15年网络安全与管理经验，带领团队从零开始打造MSRM3。
              </p>
              <div class="flex space-x-3">
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                  <i class="fa fa-github text-lg"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                  <i class="fa fa-linkedin text-lg"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                  <i class="fa fa-twitter text-lg"></i>
                </a>
              </div>
            </div>
          </div>
          <!-- 团队成员2 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow duration-300">
            <div class="aspect-square bg-gray-200 flex items-center justify-center">
              <i class="fa fa-user text-5xl text-gray-400"></i>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-bold mb-1">张华</h3>
              <p class="text-primary font-medium mb-3">技术总监</p>
              <p class="text-gray-600 text-sm mb-4">
                资深软件工程师，精通多种编程语言和框架，负责MSRM3核心技术架构设计与实现。
              </p>
              <div class="flex space-x-3">
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                  <i class="fa fa-github text-lg"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                  <i class="fa fa-linkedin text-lg"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                  <i class="fa fa-twitter text-lg"></i>
                </a>
              </div>
            </div>
          </div>
          <!-- 团队成员3 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow duration-300">
            <div class="aspect-square bg-gray-200 flex items-center justify-center">
              <i class="fa fa-user text-5xl text-gray-400"></i>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-bold mb-1">王芳</h3>
              <p class="text-primary font-medium mb-3">产品经理</p>
              <p class="text-gray-600 text-sm mb-4">
                拥有丰富的产品设计经验，致力于将复杂的技术转化为简单易用的产品，关注用户体验和需求。
              </p>
              <div class="flex space-x-3">
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                  <i class="fa fa-github text-lg"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                  <i class="fa fa-linkedin text-lg"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                  <i class="fa fa-twitter text-lg"></i>
                </a>
              </div>
            </div>
          </div>
          <!-- 团队成员4 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow duration-300">
            <div class="aspect-square bg-gray-200 flex items-center justify-center">
              <i class="fa fa-user text-5xl text-gray-400"></i>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-bold mb-1">赵强</h3>
              <p class="text-primary font-medium mb-3">安全专家</p>
              <p class="text-gray-600 text-sm mb-4">
                网络安全领域资深专家，负责MSRM3安全功能的设计与实现，确保产品的安全性和可靠性。
              </p>
              <div class="flex space-x-3">
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                  <i class="fa fa-github text-lg"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                  <i class="fa fa-linkedin text-lg"></i>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">
                  <i class="fa fa-twitter text-lg"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 发展历程 -->
    <section class="section-padding bg-gray-50">
      <div class="container mx-auto px-4 md:px-8">
        <h2 class="text-3xl font-bold text-dark text-center mb-12">发展历程</h2>
        <div class="relative">
          <!-- 时间线 -->
          <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-primary/20"></div>
          
          <!-- 时间点1 -->
          <div class="timeline-item mb-12">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
              <div class="order-2 md:order-1">
                <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                  <h3 class="text-xl font-bold mb-3 text-primary">项目启动</h3>
                  <p class="text-gray-600 mb-4">
                    MSRM3项目正式启动，作为一个开源项目，旨在为网络管理员提供简单易用的网络管理工具。
                  </p>
                  <ul class="space-y-2">
                    <li class="flex items-start">
                      <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                      <span class="text-gray-600">发布第一个版本，支持基础网络拓扑管理</span>
                    </li>
                    <li class="flex items-start">
                      <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                      <span class="text-gray-600">开源社区贡献者达到50人</span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="order-1 md:order-2 flex justify-center">
                <div class="relative">
                  <div class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center z-10 relative">
                    <span class="text-lg font-bold">2018</span>
                  </div>
                  <div class="absolute inset-0 rounded-full bg-primary/20 animate-ping" style="animation-duration: 3s;"></div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 时间点2 -->
          <div class="timeline-item mb-12">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
              <div class="flex justify-center">
                <div class="relative">
                  <div class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center z-10 relative">
                    <span class="text-lg font-bold">2020</span>
                  </div>
                  <div class="absolute inset-0 rounded-full bg-primary/20 animate-ping" style="animation-duration: 3s;"></div>
                </div>
              </div>
              <div>
                <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                  <h3 class="text-xl font-bold mb-3 text-primary">商业化转型</h3>
                  <p class="text-gray-600 mb-4">
                    团队决定将项目商业化，成立公司专注于MSRM3的开发和推广，提供更专业的技术支持和服务。
                  </p>
                  <ul class="space-y-2">
                    <li class="flex items-start">
                      <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                      <span class="text-gray-600">发布MSRM3商业版，新增数据监控和告警功能</span>
                    </li>
                    <li class="flex items-start">
                      <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                      <span class="text-gray-600">企业用户突破1000家</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 时间点3 -->
          <div class="timeline-item mb-12">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
              <div class="order-2 md:order-1">
                <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                  <h3 class="text-xl font-bold mb-3 text-primary">快速发展</h3>
                  <p class="text-gray-600 mb-4">
                    MSRM3用户数量快速增长，产品功能不断完善，团队规模也随之扩大，开始在国际市场崭露头角。
                  </p>
                  <ul class="space-y-2">
                    <li class="flex items-start">
                      <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                      <span class="text-gray-600">推出MSRM3云版本，支持云端网络管理</span>
                    </li>
                    <li class="flex items-start">
                      <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                      <span class="text-gray-600">用户数量突破5万家，覆盖全球50多个国家和地区</span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="order-1 md:order-2 flex justify-center">
                <div class="relative">
                  <div class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center z-10 relative">
                    <span class="text-lg font-bold">2022</span>
                  </div>
                  <div class="absolute inset-0 rounded-full bg-primary/20 animate-ping" style="animation-duration: 3s;"></div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 时间点4 -->
          <div class="timeline-item">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
              <div class="flex justify-center">
                <div class="relative">
                  <div class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center z-10 relative">
                    <span class="text-lg font-bold">2024</span>
                  </div>
                  <div class="absolute inset-0 rounded-full bg-primary/20 animate-ping" style="animation-duration: 3s;"></div>
                </div>
              </div>
              <div>
                <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                  <h3 class="text-xl font-bold mb-3 text-primary">引领行业</h3>
                  <p class="text-gray-600 mb-4">
                    MSRM3已成为行业领先的网络管理解决方案，持续创新，引领网络管理技术发展趋势。
                  </p>
                  <ul class="space-y-2">
                    <li class="flex items-start">
                      <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                      <span class="text-gray-600">发布MSRM3 v3.25.920.1，新增多项智能功能</span>
                    </li>
                    <li class="flex items-start">
                      <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                      <span class="text-gray-600">用户数量突破10万家，成为网络管理领域的标杆产品</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 合作伙伴 -->
    <section class="section-padding bg-white">
      <div class="container mx-auto px-4 md:px-8">
        <h2 class="text-3xl font-bold text-dark text-center mb-12">合作伙伴</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
          <!-- 合作伙伴1 -->
          <div class="bg-gray-50 rounded-xl flex items-center justify-center p-6 border border-gray-100 hover:shadow-md transition-shadow duration-300">
            <div class="text-center">
              <div class="w-16 h-16 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
                <i class="fa fa-building text-2xl text-gray-500"></i>
              </div>
              <p class="text-gray-700 font-medium">合作伙伴A</p>
            </div>
          </div>
          <!-- 合作伙伴2 -->
          <div class="bg-gray-50 rounded-xl flex items-center justify-center p-6 border border-gray-100 hover:shadow-md transition-shadow duration-300">
            <div class="text-center">
              <div class="w-16 h-16 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
                <i class="fa fa-building text-2xl text-gray-500"></i>
              </div>
              <p class="text-gray-700 font-medium">合作伙伴B</p>
            </div>
          </div>
          <!-- 合作伙伴3 -->
          <div class="bg-gray-50 rounded-xl flex items-center justify-center p-6 border border-gray-100 hover:shadow-md transition-shadow duration-300">
            <div class="text-center">
              <div class="w-16 h-16 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
                <i class="fa fa-building text-2xl text-gray-500"></i>
              </div>
              <p class="text-gray-700 font-medium">合作伙伴C</p>
            </div>
          </div>
          <!-- 合作伙伴4 -->
          <div class="bg-gray-50 rounded-xl flex items-center justify-center p-6 border border-gray-100 hover:shadow-md transition-shadow duration-300">
            <div class="text-center">
              <div class="w-16 h-16 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
                <i class="fa fa-building text-2xl text-gray-500"></i>
              </div>
              <p class="text-gray-700 font-medium">合作伙伴D</p>
            </div>
          </div>
          <!-- 合作伙伴5 -->
          <div class="bg-gray-50 rounded-xl flex items-center justify-center p-6 border border-gray-100 hover:shadow-md transition-shadow duration-300">
            <div class="text-center">
              <div class="w-16 h-16 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
                <i class="fa fa-building text-2xl text-gray-500"></i>
              </div>
              <p class="text-gray-700 font-medium">合作伙伴E</p>
            </div>
          </div>
          <!-- 合作伙伴6 -->
          <div class="bg-gray-50 rounded-xl flex items-center justify-center p-6 border border-gray-100 hover:shadow-md transition-shadow duration-300">
            <div class="text-center">
              <div class="w-16 h-16 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
                <i class="fa fa-building text-2xl text-gray-500"></i>
              </div>
              <p class="text-gray-700 font-medium">合作伙伴F</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 联系我们 -->
    <section class="section-padding bg-gradient-to-br from-primary/5 to-secondary/5">
      <div class="container mx-auto px-4 md:px-8">
        <h2 class="text-3xl font-bold text-dark text-center mb-4">联系我们</h2>
        <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">
          如果您对我们的产品有任何问题或建议，欢迎随时与我们联系，我们将竭诚为您服务。
        </p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
          <!-- 联系信息1 -->
          <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100 text-center">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
              <i class="fa fa-envelope text-2xl text-primary"></i>
            </div>
            <h3 class="text-xl font-bold mb-2">邮件联系</h3>
            <p class="text-gray-600 mb-4">
              发送邮件给我们的客服团队
            </p>
            <a href="mailto:support@msrm3.com" class="text-primary font-medium hover:underline">
              support@msrm3.com
            </a>
          </div>
          <!-- 联系信息2 -->
          <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100 text-center">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
              <i class="fa fa-phone text-2xl text-primary"></i>
            </div>
            <h3 class="text-xl font-bold mb-2">电话联系</h3>
            <p class="text-gray-600 mb-4">
              工作日9:00-18:00为您提供电话支持
            </p>
            <a href="tel:+864001234567" class="text-primary font-medium hover:underline">
              400-123-4567
            </a>
          </div>
          <!-- 联系信息3 -->
          <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100 text-center">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
              <i class="fa fa-map-marker text-2xl text-primary"></i>
            </div>
            <h3 class="text-xl font-bold mb-2">公司地址</h3>
            <p class="text-gray-600">
              北京市海淀区中关村科技园区
              创新大厦A座15层
            </p>
          </div>
        </div>
        
        <!-- 反馈表单 -->
        <div class="bg-white rounded-xl shadow-xl p-6 md:p-8 border border-gray-100 max-w-4xl mx-auto">
          <h3 class="text-2xl font-bold mb-6 text-center">给我们留言</h3>
          <form id="contact-form" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label for="name" class="block text-gray-700 font-medium mb-2">姓名</label>
                <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200" placeholder="请输入您的姓名">
              </div>
              <div>
                <label for="email" class="block text-gray-700 font-medium mb-2">邮箱</label>
                <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200" placeholder="请输入您的邮箱">
              </div>
            </div>
            <div>
              <label for="subject" class="block text-gray-700 font-medium mb-2">主题</label>
              <input type="text" id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200" placeholder="请输入留言主题">
            </div>
            <div>
              <label for="message" class="block text-gray-700 font-medium mb-2">留言内容</label>
              <textarea id="message" rows="6" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200" placeholder="请输入您的留言内容"></textarea>
            </div>
            <div class="text-center">
              <button type="submit" class="btn-primary px-8 py-3">
                <i class="fa fa-paper-plane mr-2"></i>提交留言
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>
    
  `;
  
  // 添加表单提交事件
  const contactForm = contentContainer.querySelector('#contact-form');
  if (contactForm) {
    contactForm.addEventListener('submit', (e) => {
      e.preventDefault();
      alert('感谢您的留言！我们将尽快回复您。');
      contactForm.reset();
    });
  }
  
  // 创建页脚
  const footer = Footer();
  
  // 组装页面
  aboutPage.appendChild(contentContainer);
  aboutPage.appendChild(footer);
  
  return aboutPage;
}

export default About;